<%--
  Created by IntelliJ IDEA.
  User: 21775
  Date: 2022/4/1
  Time: 20:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>jQueryFun</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnVal").click(function () {
                var $val=$("#btnVal");
                alert($val.val());
                $val.val("你好");
            })
            $("#btnText").click(function () {
                var $id1=$("#id1");
                alert($id1.text());
                $id1.text("Hello Wrold!");
            })
            $("#btnAttr").click(function () {
                var $divs=$(".class1");
                alert($divs.attr("class"));
                $divs.attr("class","class3");
            })
            $("#btnHtml").click(function () {
                var $html=$("#id1");
                console.log($html.html());
            })
            $("#btnEach").click(function () {
                var $divs=$("div");
                $.each($divs,function (index,element) {
                    console.log(index+":"+element.innerText);
                });
            });
            $("#btnOnFun").on("click",function () {
                $("#id2").append("<b>你好啊</b>");
            })
        });

    </script>
    <style type="text/css">
        #id1,#id2,.class1,.class2{
            margin-bottom: 5px;
            background: aquamarine;
            text-align: center;
        }

        .class3{
            background: red;
        }
    </style>
</head>
<body>
    <div id="id1">
        id-1
        <div class="class2">id-class-2</div>
    </div>
    <div id="id2" class="class1">id-1-class-2</div>
    <div class="class1">class-1</div>
    <div class="class2">class-2</div>
    <div class="class2">class-2</div>
    <div class="class2">class-2</div>
    <input type="button" id="btnVal" value="val">
    <input type="button" id="btnText" value="text">
    <input type="button" id="btnAttr" value="attr"><br>
    <input type="button" id="btnHtml" value="html">
    <input type="button" id="btnEach" value="each">
    <input type="button" id="btnOnFun" value="onFun">
</body>
</html>
